<template name="searchBox">
	<view class="index-header">
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="index-top" :style="{height:height+'px'}"></view> -->
		<!-- #endif -->
		<view class="flex">
			<input class="search" type="text" confirm-type="search" :placeholder="placeholdername" :value="currentValue"
			 @input.stop="handleInput" @confirm.stop="$emit('confirm')">
			<text @click.stop="clear" v-if="currentValue" class="icon">x</text>
		</view>
	</view>
</template>

<script>
export default {
	name: "searchBox",
	props: {
		iStatusBarHeight: {
			type: String
		},
		value: { //搜索框输入的值
			type: String
		},
		placeholdername: { //搜索框提示文字，默认为请输入
			type: String,
			default: '搜索喜欢的宝贝吧！'
		},
		confirm: { //搜索框回车确定方法
			type: String
		},
	},
	data() {
		return {
			height: null, //获取的状态栏高
			currentValue: this.value //不直接绑定props,根据props里的value初始化自己的值
		}
	},
	onLoad() {
		/* var _this = this;
		// 获取手机状态栏高度
		uni.getSystemInfo({
			success: function(data) {
				// 将其赋值给this
				_this.height = data.statusBarHeight;
				console.log(data.statusBarHeight);
			}
		}) */
	},
	methods: {
		//获取搜索框输入的值
		handleInput(e) {
			this.currentValue = e.target.value;
			this.$emit('input', e.target.value); //向父组件发射输入框输入的数据
		},
		//清空搜索内容
		clear() {
			this.currentValue = ''
			this.$emit('inputclear', '') //向父组件发射清除数据
		}
	}
}
</script>

<style lang="scss">
.index-header {
	width: 100%;
	margin: 20rpx 0;
	position: relative;
	font-size: 26rpx;
	.flex {
		background-color: #e7e7eb;
		border-radius: 10rpx;
		display: flex;
		width: 100%;
	}
	.icon {
		width: 30rpx;
		height: 70rpx;
		flex: 1;
		text-align: center;
		line-height: 70rpx;
	}
	.search {
		flex: 7;
		border: 0;
		font-size: 28upx;
		line-height: 70rpx;
		width: 96%;
		padding: 0 2%;
		height: 70rpx;
		letter-spacing: 2rpx;
	}
}
</style>
